import React, { Component } from "react"
import { List } from "antd-mobile"
import { withRouter } from "react-router"
import { listConfig } from "./config"
import { images } from "../../../../assets"
import "./list.scss"

interface UserListProp{
  history?:any
}


class UserList extends Component<UserListProp,{}>{
    goToAnotherPage = (path:string) => {
      this.props.history.push(path)
    }
    render() {
      return (
        <div className="user-list-wrap">
          {
            listConfig.map((val, index) => {
              let noBorderTop = listConfig[index - 1] && (!!listConfig[index - 1].marginB)
              return <List key={index} className={`user-list-item ${val.marginB ? "margin-b" : ""} ${noBorderTop ? "no-border-top" : ""}`}>
                <List.Item
                  thumb={val.icon}
                  onClick={()=>{
                    this.goToAnotherPage(val.to)
                  }}
                >
                  <span className="title">{val.title}</span>
                  <img className="triangle" alt="" src={images.mine.icons.arrowRight}/>
                </List.Item>
              </List>
            })
          }
        </div>
      )
    }
  }


// @ts-ignore
export default withRouter(UserList)
